.state-nav {
  position: relative;
  @media (min-width: $viewport-ms) {
    background: white;
    position: sticky;
    z-index: 1;
    top: 0;
    width: calc(
      100% + 1px
    ); // this hides the table borders that otherwise appear on the top right
  }
  @media (min-width: $viewport-ms) and (max-width: $viewport-md) {
    width: calc(100vw - spacer(24));
    padding-right: spacer(24);
  }
  h2 {
    margin: 0;
    @include type-size(500);
  }
  .state-nav-inner {
    border-bottom: 2px solid $color-slate-500;
    margin-bottom: spacer(24);
    @media (min-width: $viewport-lg) {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      > * {
        flex: 1 1 auto;
      }
    }
  }
}

.state-nav-combobox {
  @media (min-width: $viewport-md) {
    text-align: right;
  }
  @media (max-width: $viewport-ms) {
    padding: spacer(8) 0 spacer(8);
    display: block;
  }
  label {
    font-weight: bold;
    display: inline-block;
  }

  [data-reach-combobox] {
    margin: spacer(4) 0;
    @media (min-width: $viewport-ms) {
      display: inline-block;
      margin-left: spacer(16);
    }
  }
  input {
    @include padding(4);
    border: 1px solid $color-slate-600;

    @media (max-width: $viewport-ms) {
      width: 100%;
      @include padding(8);
    }
    &:focus {
      outline: 3px solid $color-blueberry-200;
    }
  }
}

.popover {
  [data-user-value] {
    font-weight: bold;
  }
  [data-suggested-value] {
    font-weight: normal;
  }
  z-index: 1;
}
